<template>
  <div>
    <div class="font-weight font-md">公开课管理</div>
    <div class="d-flex flex-column py-3 j-center">
      <div class="bg-table p-1 border">
        <span class="el-icon-film"></span> 筛选
      </div>
      <div class="border d-flex flex-row p-5">
        <div class="flex-1 pl-6 ml-5">
          <el-input class="w-90" placeholder="输入标题或关键字" v-model="input" clearable></el-input>
        </div>
        <div class="t-center flex-row">
          <span class="font-sd font-lighter px-2">上传时间:</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </div>
        <div class="flex-1 t-center">
          <el-button type="primary">筛选</el-button>
        </div>
      </div>
    </div>

    <div>
      <div class="bg-table p-1 border d-flex flex-row a-center">
        <span class="el-icon-film flex-1">公开课列表</span>
        <el-button type="primary" class="text-right" size="small" @click="addopenclass">新增公开课</el-button>
      </div>
      <div class="border d-flex flex-row p-1">
        <el-table
          class="mt-2 font-sm"
          :data="list"
          :header-cell-style="{background: '#f5f8fa', lineHeight: 1.6}"
          ref="multipleTable"
        >
          <el-table-column :reserve-selection="true" type="selection" align="center" width="60"></el-table-column>
          <el-table-column prop="title" label="标题" align="center"></el-table-column>
          <el-table-column prop="picture" label="列表图" align="center"></el-table-column>
          <el-table-column prop="number" label="报名人数" align="center"></el-table-column>
          <el-table-column prop="money" label="报名费" align="center"></el-table-column>
          <el-table-column prop="uploader" label="上传人" align="center"></el-table-column>
          <el-table-column prop="time" label="上传时间" align="center"></el-table-column>

          <el-table-column label="是否推荐到首页" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.checked"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeSwitch(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="d-flex flex-row">
                <div class="flex-1 text-green">
                  <el-link
                    :underline="false"
                    type="success"
                    class="font-sm"
                    @click="registrationInformation(scope.row)"
                  >查看报名信息</el-link>
                </div>
                <div class="flex-1 text-green">
                  <el-link
                    :underline="false"
                    type="success"
                    class="font-sm"
                    @click="changeSwitch(scope.row)"
                  >编辑</el-link>
                </div>
                <div class="flex-1 text-red">
                  <el-link
                    :underline="false"
                    type="danger"
                    class="font-sm"
                    @click="del(scope.row)"
                  >删除</el-link>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="bg-white d-flex flex-row a-center mt-1">
      <div class="flex-1">
        <el-button @click="toggleSelection([list])" size="small">全选</el-button>
      </div>
      <div class>
        <el-link type="danger" :underline="false">批量删除</el-link>
      </div>
      <div class="flex-6 text-right">
        <el-pagination
          background
          :page-sizes="[10, 20, 30]"
          layout="prev, pager, next, sizes, total"
          :total="1000"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      input: "",

      list: [
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
        {
          title: "公开课",
          picture: "图片",
          number: "20",
          money: "25$",
          uploader: "李四",
          time: "2020-05-23",
          checked: true,
        },
      ],
      multipleSelection: [],
      //复选框状态
      checked: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  mounted() {},
  methods: {
    //新增
    addopenclass(){
      this.$router.push('/begin/addopenclass');
    },
    //查看
    registrationInformation(){
      this.$router.push('/begin/registrationinformation');
    },
    //编辑
    changeSwitch(data) {
      console.log(data);
      this.$router.push('/begin/editopenclass');
    },
    //删除
    del(){},
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleAllSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  computed: {},
};
</script>


<style scoped>
.yh-card {
  border-radius: 10px;
  height: 100px;
  overflow: hidden;
}
</style>
